/*
 * @Author: szx
 * @Date: 2023-03-27 19:09:13
 * @LastEditTime: 2023-03-28 13:11:13
 * @Description: 
 * @FilePath: \learn\fullstackopen\part1\part1\src\App.js
 */
import { useState } from 'react'


const Header = ({ header }) => <h2>{header}</h2>

const Button = ({ handleClick, text }) => {
  return (
    <button onClick={handleClick}>{text}</button>
  )
}

const Statistics = ({ good, neutral, bad }) => {

  const all = (good + neutral + bad);
  if (all === 0) {
    return (
      <div>
        No feedback given
      </div>
    )
  }

  const average = (good - bad) / all;
  let positive = (good / all) * 100;
  return (
    <tbody>
      <StatisticLine text='good' value={good} />
      <StatisticLine text='neutral' value={neutral} />
      <StatisticLine text='bad' value={bad} />
      <StatisticLine text='all' value={all} />
      <StatisticLine text='average' value={average} />
      <StatisticLine text='positive' value={positive} />
    </tbody>

  )
}

const StatisticLine = ({ text, value }) => {
  return (
    <tr>
      <td>{text}</td>
      <td>{value}</td>
    </tr>
  )
}
const App = () => {
  // save clicks of each button to its own state
  const [good, setGood] = useState(0)
  const [neutral, setNeutral] = useState(0)
  const [bad, setBad] = useState(0)

  const handleGood = () => setGood(good + 1);
  const handleNeutral = () => setNeutral(neutral + 1);
  const handleBad = () => setBad(bad + 1);
  return (
    <div>
      <Header header='give feedback' />
      <Button handleClick={handleGood} text='good' />
      <Button handleClick={handleNeutral} text='neutral' />
      <Button handleClick={handleBad} text='bad' />


      <Header header='statistics' />
      <Statistics good={good} neutral={neutral} bad={bad} />


    </div>
  )
}
export default App